<template>
  <!-- Map 筛选控件 -->
  <view class="filter-control">
    <view class="left">
      <picker
        class="filter-btn"
        style="margin-left: 0"
        mode="selector"
        :range="insideOutsideData"
        range-key="text"
        :value="insideOutside"
        @change="sourceTypeChange"
      >
        <PickerValue :valueText="getValueText" />
      </picker>
    </view>
    <button
      v-if="insideOutside === SourceTypeEnum.INSIDE"
      class="filter-btn"
      :class="[typeSelected.length && 'active']"
      type="none"
      @click="toTypeSelection"
    >
      <text>筛选</text>
      <view class="triangle"></view>
    </button>
    <button
      v-if="insideOutside === SourceTypeEnum.INSIDE"
      class="filter-btn"
      :class="[industryIdSelected.length && 'active']"
      type="none"
      @click="selectIndustryShow = true"
    >
      <text>行业</text>
      <view class="triangle"></view>
    </button>
  </view>

  <SelectIndustry
    v-model:show="selectIndustryShow"
    :is-api-data="true"
    :selected="industryIdSelected"
    @submit="handleSelectIndustrySubmit"
  />
</template>

<script setup lang="ts">
  import type { Localdata } from '@/components/Form/types';
  import { SourceTypeEnum, ViewTypeEnum } from '@/enums/contactsEnum';
  import { navigateTo } from '@/router';
  import type { TypeSelectedItem } from '@/router/types/modules';
  import { computed, type PropType, ref, unref } from 'vue';
  import PickerValue from '@/components/Form/components/PickerValue.vue';
  import SelectIndustry from '@/components/SelectIndustry/index.vue';

  const props = defineProps({
    viewType: {
      type: Number as PropType<ViewTypeEnum>,
    },

    assType: {
      type: Number as PropType<SourceTypeEnum>,
      required: true,
    },
  });

  const emit = defineEmits<{
    (e: 'sourceTypeChange', type: SourceTypeEnum): void;
    (e: 'filterChange', type: Recordable<(number | string)[]> | null): void;
  }>();

  const insideOutside = ref(props.assType);

  const insideOutsideData = ref<Localdata[]>([
    {
      value: SourceTypeEnum.ALL,
      text: '全部',
    },
    {
      value: SourceTypeEnum.INSIDE,
      text: '会内人脉',
    },
    {
      value: SourceTypeEnum.OUTSIDE,
      text: '会外人脉',
    },
  ]);

  const selectIndustryShow = ref(false);

  const getValueText = computed(() => unref(insideOutsideData)[unref(insideOutside)].text);

  const sourceTypeChange = (e: any) => {
    const val = Number(e.detail.value);
    insideOutside.value = val;
    typeSelected.value = [];
    industryIdSelected.value = [];
    emit('sourceTypeChange', val);
  };

  const typeSelected = ref<TypeSelectedItem[]>([]);
  const toTypeSelection = () => {
    navigateTo({
      name: 'typeSelection',
      options: {
        keys: ['memberLevel', 'typeId'],
        selected: unref(typeSelected),
        success: (arr) => {
          typeSelected.value = arr;
          handleFilterChange();
        },
      },
    });
  };

  const industryIdSelected = ref<number[]>([]);
  function handleSelectIndustrySubmit(ids: number[]) {
    industryIdSelected.value = ids;
    handleFilterChange();
  }

  function handleFilterChange() {
    const nArr = selectedReduce(typeSelected.value);
    emit('filterChange', { ...nArr, industryId: industryIdSelected.value });
  }

  function selectedReduce(arr: TypeSelectedItem[]) {
    return arr.reduce((result, val) => {
      (result[val.key] || (result[val.key] = [])).push(val.id);
      return result;
    }, {} as Recordable);
  }
</script>

<style scoped lang="scss">
  .filter-control {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
    margin-left: 20rpx;

    .left {
      flex: 1;
      margin-left: 10rpx;
      display: flex;
      align-items: center;
    }

    .filter-btn {
      height: 46rpx;
      padding: 0 20rpx;
      border-radius: 10rpx;
      background-color: #f5f5f5;
      font-size: 28rpx;
      color: #000;
      line-height: 46rpx;
      margin-left: 30rpx;
      position: relative;
      .triangle {
        position: absolute;
        right: 8rpx;
        bottom: 8rpx;
        width: 0rpx;
        height: 0rpx;
        border-top: 6rpx solid transparent;
        border-right: 6rpx solid #808080;
      }

      &.active {
        background-color: #d0f7ff;
        color: #2878ff;
        .triangle {
          border-right-color: #2878ff;
        }
      }
    }
  }
</style>
